<template>
  <div class="">
    123
    <div
      class="fixed bottom-3 inset-x-0 transition-all duration-300 ease-in-out"
      :style="{ width: `calc(100vw + ${store.drawer ? store.width : 0}px)` }"
    >
      <div class="flex justify-center items-center">
        <div
          class="relative rounded-lg bg-[#F3F4F6] min-w-96 w-[70vw] min-h-28 p-3 box-border"
        >
          <textarea
            v-model="value"
            placeholder="你可以问我任何问题"
            class="w-full appearance-none border-none outline-none p-0 m-0 bg-transparent mb-8"
            :style="{ resize: 'none' }"
            @input="autoResize"
          ></textarea>
          <div
            class="absolute inset-x-4 bottom-1 justify-between flex items-center"
          >
            <div>
              <v-tooltip
                text="上传文件，支持pdf、txt、csv、docx、doc、xlsx、xls、pptx、ppt、mobi、epub、png、jpeg、jpg等"
                location="top"
                activator="parent"
              >
                <template v-slot:activator="{ props }">
                  <v-icon icon="mdi-paperclip" v-bind="props"></v-icon>
                </template>
              </v-tooltip>
            </div>
            <div>
              <v-btn
                @click="send"
                :disabled="value.length < 1"
                icon="mdi-navigation"
                color="#4D6BFE"
              ></v-btn>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useBackStore } from '@/store/background';
import { useSocketStore } from '@/store/socket';
import { ref } from 'vue';

const value = ref('');
const store = useBackStore();
const socket = useSocketStore();
function send() {
  console.log(value.value);
  socket.send(value.value);
  value.value = '';
}
function autoResize(event: Event) {
  const textarea = event.target as HTMLTextAreaElement;
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
}
</script>

<style scoped></style>
